<template>
  <div class="card-table">
    <div class="table-header">
      <div class="header-botton-if">
        <slot name="tableHeader"></slot>
      </div>
      <div class="header-button-ri">
        <el-button :icon="Refresh" circle> </el-button>
        <el-button :icon="Printer" circle> </el-button>
        <el-button :icon="Operation" circle> </el-button>
        <el-button :icon="Search" circle> </el-button>
      </div>
    </div>

    <!-- 表格主体 -->
    <el-table border :data="tableData" ref="tableRef" v-bind="$attrs" class="hei" table-layout="auto">

      <el-table-column prop="id" label="#" width="50" align="center" show-overflow-tooltip />
      <el-table-column prop="name" width="150" label="用户名称" align="center" show-overflow-tooltip />
      <el-table-column prop="gender" width="100" label="性别" align="center" show-overflow-tooltip><template
          #default="scope">
          <div>
            {{ scope.row.gender == 1 ? "男" : "女" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="age" width="100" label="年龄" align="center" show-overflow-tooltip />

      <!-- <el-table-column
            prop="salary"
            width="100"
            label="薪资"
            align="center"
            show-overflow-tooltip
          /> -->
      <el-table-column prop="class" width="100" label="职位" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div>
            {{ scope.row.class == 1 ? "管理员" : scope.row.class == 2 ? "商家" : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="employeeNo" width="150" label="员工编号" align="center" show-overflow-tooltip />
      <el-table-column prop="iphone" width="150" label="手机号码" align="center" show-overflow-tooltip />

      <el-table-column prop="idCard" width="200" label="身份证" align="center" show-overflow-tooltip />

      <el-table-column prop="mailbox" width="200" label="邮箱" align="center" show-overflow-tooltip />
      <el-table-column prop="address" width="200" label="地址" align="center" show-overflow-tooltip />
      <el-table-column prop="createdAt" width="200" label="创建时间" align="center" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="400" align="center">
        <!-- 表格操作 -->
        <template #default="scope">
          <!-- <el-button
                type="primary"
                link
                :icon="View"
                @click="showData(scope)"
                >查看</el-button
              > -->
          <el-button type="warning" link :link="scope.row.identity ? true : false" :icon="EditPen"
            @click="UserEditeData(scope)">商家信息设置</el-button>
          <el-button type="warning" link :link="scope.row.identity ? true : false" :icon="EditPen"
            @click="addShopSite(scope)">添加店铺位置</el-button>

          <!-- <el-button :type="scope.row.identity ? 'primary' : 'danger'" :icon="EditPen"
            @click="EditeData(scope)">删除商家</el-button> -->

          <el-popconfirm  confirm-button-text="是" cancel-button-text="不" :icon="InfoFilled" icon-color="#626AEF"
            title="你确定要删除商家吗？" @confirm="confirmEvent(scope)" >
            <template #reference>
              <el-button type="danger">删除商家</el-button>
            </template>
          </el-popconfirm>
        </template>



      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagin">
      <div class="pagin-left">
      </div>
      <Pagination :pageTotalSize="pageTotalSize"></Pagination>
    </div>


  </div>
</template>

<script setup>
import SearchForm from "@/components/SearchForm/index.vue";
import Pagination from "./Pagination/index.vue";
import {
  Refresh,
  Printer,
  Operation,
  Search,
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import { computed, ref, toRaw, watchEffect } from "vue";
// import { worksData } from "@/stores/worksData.js";
// import {staffData} from "@/stores/staff.js" 
import {  useRouter } from 'vue-router'

import { userManage } from "@/stores/user.js"
// 是否显示搜索模块
let props = defineProps({
  isShowSearch: {
    type: Boolean,
    default: true
  },
  staffInfoData: {
    type: Array,
    default: []
  }
})


let pageTotalSize = computed(() => {
  // return mStaff.pageTotalSize
})

//使用路由
let router = useRouter()

let mStaff = userManage()

let emit = defineEmits(["openDoor", "openAddDoor"])

let isSearch = computed(() => {
  return props.isShowSearch
})
// const isShowSearch = ref(true);
// let wData = worksData();

// 获取仓库里面的作品数据
let tableData = computed(() => {
  // console.log(wData.teamsWorksdata)
  let newData = []
  let data = toRaw(props.staffInfoData)

  //  console.log(data,"这是从父亲传过来的")
  data.forEach(item => {
    newData.push({ ...item, ...item.identity })
  })
  // console.log(newData)
  return newData
});

// // 是否选择了数据
// let allSelectData = (e) => {
//   selectData.value = e;
// };

// // 展示详情数据
// let showData = (e) => {
//   console.log(e.row);
//   // getSelectionRows()
// };

// 删除员工
 let confirmEvent = async (e) => {
  // console.log(e.row.id, "删除员工信息")
  // 往仓库里面放，这样就不会，耦合性高了
  // mStaff.$patch((state)=>{
  //   state.formStaffColumnData = e.row
  // })
   let res = await mStaff.deleteUserInfo({id:e.row.id})
    // console.log(res,"protable这边的数据")

      if(res.code==200){
        ElMessage({
      message: res.mess,
      type: 'success',
      plain: true,
    })
      mStaff.getUserData()
    }else{
      ElMessage({
    message: res.mess,
    type: 'error',
    plain: true,
  })
    }
  // emit("openDoor")

}


//添加商家商店位置
let addShopSite  =(e)=>{

  // this.$router.push({ name: 'addSite' });
  // this.$router.push({ name: 'addSite' });
  // this.$router.push('/');

  // mStaff.$patch((state)=>{
  //   console.log(state,"state")
  //   state.userShopData = e.row
  // })
  mStaff.updatauserShopData(e.row)
  router.push({ name: 'addSite' })
  // console.log(router,"fesfe")

  // console.log(e.row,"商家店铺位置")
}

// 修改员工的数据
let UserEditeData = (e) => {
  // console.log(e.row,"修改员工的数据")
  // mStaff.$patch((state)=>{

  mStaff.updatauserData(e.row)

  // console.log(mStaff,"这是仓库里面已经有数据了的")
  // })
  // openAddDoor()
  emit("openAddDoor")
}


// 提交数据
let pushData = () => {
  // console.log(selectData.value);
  // console.log("提交数据")
};

</script>

<style lang="scss" scoped>
.card-table {
  box-sizing: border-box;
  background-color: #fff;
  padding: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .pagin {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pagin-left {
      display: flex;
      align-items: center;
      font-size: 14px;

      .mar {
        margin-left: 20px;

        .a {
          margin: 0 4px;
        }
      }
    }
  }

  .hei {
    width: 100%;
    height: 100%;
  }
}
</style>